<!DOCTYPE html>
<html>
	<head lang="en">
    <meta charset="UTF-8">
    <title>学科竞赛 注册页面</title>
 
    <style>
        td input[type="text"],td input[type="email"],td input[type="password"], td input[type="date"]{
            width:90%;
        }
        fieldset{
        	    background:lightsteelblue;
        	    width: 450px;
				height: 430px;
				margin-top: 80px;
			    margin-right: 40px;
				margin-left: 700px;
				border-radius: 10px;
                border:1px solid lightsteelblue;
        }
        .a{
			/*background: url(../img/reg.jpeg) no-repeat;*/
			/*background-size: 100%;*/
		}
.login h2{   
    color: #fff;   
    text-shadow:0 0 10px;   
    letter-spacing: 1px;
}  
input{   
    width: 10px;   
    height: 8px;   
    margin-bottom: 10px;   
    outline: none;   
    padding: 10px;   
    font-size: 13px;   
    color: blue;   
    text-shadow:1px 1px 1px;
    border: 1px solid whitesmoke;
    border-radius: 4px;   
    background-color: whitesmoke;   
} 
.but1{   
    width: 150px;   
    min-height: 20px;   
    display: block;   
    background-color: #4a77d4;   
    border: 1px solid #3762bc;   
    color: #fff;   
    padding: 9px 14px;   
    font-size: 15px;      
    border-radius: 5px;     
}
.but2{   
    width: 150px;   
    min-height: 20px;   
    display: block;   
    background-color: #4a77d4;   
    border: 1px solid #3762bc;   
    color: #fff;   
    padding: 9px 14px;   
    font-size: 15px;    
    border-radius: 5px;   
    
}
    </style>
    <script>
        function checkLength(){
            var pwd=document.getElementById("pwd").value;
            var spanLen=document.getElementById("spanLen");
 
 
            if(pwd.length<=3&&pwd.length>0)
                spanLen.innerHTML="弱";
            else if(pwd.length<=6)
                spanLen.innerText="中";
            else
                spanLen.innerText="强";
 
        }
 
        function checkPSW(){
            var pwd1=document.getElementById("pwd").value;
            var pwd2=document.getElementById("pwd2").value;
            var pswInfo=document.getElementById("pswInfo");
            if(pwd1!=pwd2)
                pswInfo.innerText="两次密码不同";   // alert("两次密码不同");
            else
                pswInfo.innerText="";
        }
        
    </script>
</head>
	<body class="a" style="background: url(../static/img/reg.jpeg);">
		<form action="reg" method="post">
				<!--<h1 style="margin-bottom: 0px; color: black;">
            学科竞赛用户注册
      </h1>-->
    <fieldset>
        <table align="center" width="350px" >
        	
        <div class="login"><h2 style="text-align: center;">学科竞赛用户注册</h2></div>
        <br>
        <br>
            <tr>
                <td width="7%" style="color: whitesmoke;" >用户名:</td>
                <td width="20%"><input name="username" type="text" required="true" autofocus="true" placeholder="请输入用户名"></td>
                <td width="4%" style="color: red;">&nbsp;&nbsp;*</td>
            </tr>
            <tr>
                <td style="color: whitesmoke;">邮箱:</td>
                <td><input name="email" type="email" required="true" autofocus="true" placeholder="请输入邮箱"></td>
                <td style="color: red;">&nbsp;&nbsp;*</td>
            </tr>
            <tr>
                <td style="color: whitesmoke;">密码:</td>
                <td><input name="password" type="password" id="pwd" required="true" onkeyup="checkLength()" placeholder="请输入密码"></td>
                <td style="color: red;">&nbsp;&nbsp;* <span id="spanLen"></span></td>
                </td>
            </tr>
            <tr>
                <td style="color: whitesmoke;">确认密码:</td>
                <td><input name="truepassword" type="password"  id="pwd2" required="true" onblur="checkPSW()" placeholder="请再次输入密码"></td>
                <td align="left" style="color: red;">&nbsp;&nbsp;* <span id="pswInfo" style="color: #c41a15;"></span></td>
 
            </tr>
        </table>
       
        <br>
        <br>
            <tr>
        
        <table align="center" width="400px">
                <td colspan="2" >
                	<br>
                    <br>
                    <input class="but2" type="submit" value="注册新用户"/>
                </td>
                <td>
                	<br>
                    <br>
                    <button class="but2" type="reset">重置</button>  
                </td>
            </tr>
        </table>
    </fieldset>
</form>
	</body>
</html>
